import * as React from 'react';
import { Button, Tooltip } from 'antd';
import { observer } from 'mobx-react';
import AddSelectOptionsDialog from '../../dialog/addSelectOptions';
import AddFixphareDialog from '../../dialog/addFixphareOptions';
import AddSelectTreeDialog from '../../dialog/addSelectTree';

@observer
export default class Workbook extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <div className="edc-workbook">
                <div className="edc-workbook-head" >
                    <div className="cell-name">{store.activeCellName}({store.selection})</div>
                    <div className="cell-undo-redo">
                        <Button title="撤销" onClick={store.undo} disabled={store.undoDisabled}><i className="icon-coms-Revoke2" /></Button>
                        <Button title="重做" onClick={store.redo} disabled={store.redoDisabled}><i className="icon-coms-redo" /></Button>
                    </div>
                    <div className="cell-opt"><i className="icon-mode-function" style={{ fontSize: 16, color: '#57c5f7' }} /></div>
                    <input className="formula-text-box ant-input" ref={ref => this.formulaTextBox = ref} />
                </div>
                <div style={{ height: 'calc(100% - 34px)' }}>
                    <div className="workbook-container" ref={ref => this.container = ref} style={{ height: '100%' }} />
                </div>
                <div hidden id="customFunDiv"></div>
                <AddSelectOptionsDialog store={store.addSelectOptionsStore} />
                <AddFixphareDialog store={store.addFixphareStore} />
                <AddSelectTreeDialog store={store.addSelectTreeStore} />
            </div >
        )
    }

    componentWillUnmount() {
        const { store } = this.props;
        store.destoryWorkbook();
        
    }
    componentDidMount() {
        if (this.container) {
            const { store } = this.props;
            const workbook = new GC.Spread.Sheets.Workbook(this.container);
            const fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(this.formulaTextBox, {});
            fbx.workbook(workbook);
            store.initWorkbook(workbook);
        }
    }
}